import { useState } from 'react';

interface BookingFormProps {
  onSubmit: (data: {
    name: string;
    phone: string;
    email?: string;
    notes?: string;
  }) => void;
  loading: boolean;
}

const BookingForm: React.FC<BookingFormProps> = ({ onSubmit, loading }) => {
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    notes: ''
  });
  
  const [errors, setErrors] = useState<Record<string, string>>({});
  
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    
    // 清除对应字段的错误信息
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ''
      }));
    }
  };
  
  const validateForm = () => {
    const newErrors: Record<string, string> = {};
    
    // 姓名验证
    if (!formData.name.trim()) {
      newErrors.name = '请输入姓名';
    }
    
    // 手机号验证
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!formData.phone.trim()) {
      newErrors.phone = '请输入手机号';
    } else if (!phoneRegex.test(formData.phone)) {
      newErrors.phone = '请输入有效的手机号';
    }
    
    // 邮箱验证（如果填写）
    if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = '请输入有效的邮箱地址';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (validateForm()) {
      onSubmit(formData);
    }
  };
  
  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* 姓名字段 */}
      <div className="space-y-2">
        <label htmlFor="name" className="block text-sm font-medium">
          姓名 <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
          placeholder="请输入您的姓名"
          className={`input-field ${errors.name ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''}`}
        />
        {errors.name && (
          <p className="text-red-500 text-sm">{errors.name}</p>
        )}
      </div>
      
      {/* 手机号字段 */}
      <div className="space-y-2">
        <label htmlFor="phone" className="block text-sm font-medium">
          手机号 <span className="text-red-500">*</span>
        </label>
        <input
          type="tel"
          id="phone"
          name="phone"
          value={formData.phone}
          onChange={handleInputChange}
          placeholder="请输入您的手机号"
          className={`input-field ${errors.phone ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''}`}
        />
        {errors.phone && (
          <p className="text-red-500 text-sm">{errors.phone}</p>
        )}
      </div>
      
      {/* 邮箱字段（选填） */}
      <div className="space-y-2">
        <label htmlFor="email" className="block text-sm font-medium">
          邮箱 <span className="text-neutral text-xs">(选填)</span>
        </label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          placeholder="请输入您的邮箱地址"
          className={`input-field ${errors.email ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''}`}
        />
        {errors.email && (
          <p className="text-red-500 text-sm">{errors.email}</p>
        )}
      </div>
      
      {/* 咨询备注（选填） */}
      <div className="space-y-2">
        <label htmlFor="notes" className="block text-sm font-medium">
          咨询备注 <span className="text-neutral text-xs">(选填)</span>
        </label>
        <textarea
          id="notes"
          name="notes"
          value={formData.notes}
          onChange={handleInputChange}
          placeholder="请输入您的咨询内容或需求（选填）"
          rows={4}
          className="input-field resize-none"
        />
      </div>
      
      {/* 隐私政策同意 */}
      <div className="flex items-start space-x-2 pt-2">
        <input
          type="checkbox"
          id="privacy"
          name="privacy"
          required
          className="mt-1 h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
        />
        <label htmlFor="privacy" className="text-sm text-neutral">
          我已阅读并同意<a href="#" className="text-primary hover:underline">隐私政策</a>和<a href="#" className="text-primary hover:underline">服务条款</a>
        </label>
      </div>
      
      {/* 提交按钮 */}
      <div className="pt-4">
        <button
          type="submit"
          className={`btn-primary w-full py-3 ${loading ? 'opacity-70 cursor-not-allowed' : ''}`}
          disabled={loading}
        >
          {loading ? (
            <span className="flex items-center justify-center">
              <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              提交中...
            </span>
          ) : (
            '确认预约'
          )}
        </button>
      </div>
    </form>
  );
};

export default BookingForm;